<template>
  <div>
    <CommonHead></CommonHead>
    <div class="personal">
      <div class="personal-banner">
        <img src="@/assets/img/15.jpg" alt="" class="w100" />
      </div>
      <div class="con">
        <div class="clearfix">
          <PersonalLeft></PersonalLeft>
          <div class="fr personal-re">
            <ul class="personal-re-ul">
              <li class="active">
                <a @click="$router.push('/personal')">创作（22） </a>
              </li>
              <li>
                <a>收藏（{{collectFolderListArr.length}}） </a>
              </li>
              <li>
                <a href=""> 动态（22） </a>
              </li>
              <li>
                <a class="ziliao" @click="$router.push('/personaldata')">资料 </a>
              </li>
              <li>
                <a href="">更换主题</a>
              </li>
            </ul>
            <div class="personal-re-cons">
              <p class="personal-re-p">收藏</p>
            </div>
            <div class="personal-div">
              <div class="row">
                <div class="col-sm-4" v-for=" item in collectFolderListArr" :key="item.id">
                  <div class="case-div">
                    <div class="case-img pr">
                      <!-- <a href="/designerdetails"> -->
                      <a @click="handleClick(item.id)">
                        <img src="@/assets/img/1.jpg" alt="" class="w100" />
                      </a>
                    </div>
                    <div class="case-bot">
                      <p class="case-title">
                        <a @click="handleClick(item.id)">{{ item.name }}</a>
                      </p>
                      <div class="personal-date clearfix">
                        <p class="case-bq fl">创建日期：{{ item.created_at }}</p>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
  </div>
</template>
  
<script>
import * as api from "@/api/users"

export default {
  data() {
    return {
      // 收藏夹
      collectFolderListArr: "",

      // 图片地址
      imgPath: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      // 图片路径
      imageName: "",
    }
  },
  created() {
    this.getMyCollectFoler()
  },
  methods: {
    // 请求我的收藏夹
    async getMyCollectFoler() {
      try {
        let res = await api.myCollectFolderApi()
        this.collectFolderListArr = res.data.data
        console.log(this.collectFolderListArr);
      } catch (e) {
        console.log(e);
      }
    },


    handleClick(id) {
      console.log(id);
      this.$router.push({
        path: "/editing",
        query: {
          id
        }
      })
    }
  },
  computed: {
    imgUrl() {
      return this.imgPath + this.imgName
    }
  }
}
</script>
  
<style scoped lang="less">
.ziliao {
  cursor: pointer;
  text-decoration: none;
}
</style>